<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <style>
        table{
            width: 900px;
            border-collapse: collapse;
            margin: 0 auto;
        }
        td{
            height: 80px;
            border: 1px solid #CADEFF;
            text-align: center;
            color: rgb(167, 159, 159);
            font-size: 14px;
        }
        th{      
            border-top: 3px solid #a7cbff;
            background: #e2f2ff;
            text-align: center;
        }
        
        
        .count-input{
            width: 50px;
            text-align: center;
            height: 21px;
  

        }
        tr:hover{
            background-color:#e2f2ff;
        }
        #foot td{
            height: 30px;
        }
        .reduce{
            position: relative;
            left: 5px;
            bottom: 2px;
        }
        .add{
            position: relative;
            right: 5px;
            bottom: 2px;
        }
        span{
            cursor: pointer;
        }
        .reduce,.add{
            display: inline-block;
            width: 20px;
            height: 25px;
            background-color: #ccc;
            color: white;
            cursor: pointer;
        }
        
        #allPrice{
            display: inline-block;
            width: 50px;
        }
        tfoot tr td{
            text-align: left;
        }
    </style>

</head>

<body>
    <div class="catbox">
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox" id="ckAll">全选</th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="tb">
                <!-- <tr class="inline">
                    <td><input type="checkbox" name="ck"></td>
                    <td>Casio/卡西欧 EX-TR350</td>
                    <td>5999.88</td>
                    <td>
                        <span class="reduce">-</span>
                        <input type="text" value="1" class="count-input">
                        <span class="add">+</span>
                    </td>
                    <td>5999.88</td>
                    <td>
                        <span class="delete">删除</span>
                    </td>
                </tr> -->
            </tbody>  
            <tfoot id="foot">
            <tr>
                <td class="del"><input type="button" value="批量删除"></td>
                <td></td>
                <td></td>
                <td></td>
                <td>总数：<span id="allCount"></span></td>
                <td>总价：<span id="allPrice"></span></td>
            </tr>
            </tfoot>
        </table>
    
    </div>


    <script src="../js/ajax.js"></script>
    <script>

        // 首先判断是否登录
        const username = localStorage.getItem('login_user') ;
        console.log(username);


        const oTb = document.querySelector('.tb') ;



        if(username) {
            ajax({
                type : 'post' , 
                url : '../php/showCart.php' ,
                data : {
                    username
                } ,
                cb : data => {
                    console.log(data);
                    let html = '' ;
                    const { list } = data ;
                    console.log(list);
                    list.forEach( ({
                        num , 
                        goods_title ,
                        good_img ,
                        goods_price ,
                        goods_id
                    }) => {
                        html += `
                            <tr class="inline">
                                <td><input type="checkbox" name="ck"></td>
                                <td>${goods_title}</td>
                                <td>${goods_price}</td>
                                <td>
                                    <span class="reduce">${num>1?'-':''}</span>
                                    <input type="text" value="${num}" class="count-input">
                                    <span class="add" goods-id="${goods_id}">+</span>
                                </td>
                                <td>${goods_price * num}</td>
                                <td>
                                    <span class="delete">删除</span>
                                </td>
                            </tr>
                        `
                        
                    })
                    
                    oTb.innerHTML = html ;

                }
            })
        } else {
            alert('请登录') ;
        }



        oTb.onclick = function(e) {
            const target = e.target ;
            // 数量加
            //    访问加入购物车的接口  addToCart (username / num / id)
            //    商品id可以绑定在标签上(自定义属性goods-id)


            if(target.className === 'add') {
                const id = target.getAttribute('goods-id') ;
                ajax({
                    type : 'post' ,
                    url : '../php/addToCart.php' ,
                    data : {
                        username ,
                        num : 1 ,
                        id 
                    } ,
                    cb : data => {
                        console.log(data);
                        const {status} = data ;
                        if(status) {
                            target.previousElementSibling.value++ ;
                        }
                    }
                })
            }

            // 减号   num变成-1
        }



    </script>



</body>


</html>